import { AbstractMesh, Color3, Mesh, Vector3 } from '@babylonjs/core'
import {
  AdvancedDynamicTexture,
  Button,
  Control,
  Ellipse,
  Line,
  StackPanel,
  TextBlock
} from '@babylonjs/gui'

class TagUI {
  texture: AdvancedDynamicTexture
  panel: StackPanel
  tagId: number = 0

  constructor() {
    this.texture = AdvancedDynamicTexture.CreateFullscreenUI('tags')
  }

  createAxis(scene) {
    const size = 1000
    const ax = Mesh.CreateLines(
      'axisX',
      [Vector3.Zero(), new Vector3(size, 0, 0)],
      scene
    )
    ax.color = Color3.Red()

    const ay = Mesh.CreateLines(
      'axisY',
      [Vector3.Zero(), new Vector3(0, size, 0)],
      scene
    )
    ay.color = Color3.Green()

    const az = Mesh.CreateLines(
      'axisZ',
      [Vector3.Zero(), new Vector3(0, 0, size)],
      scene
    )
    az.color = Color3.Blue()
  }

  createTag(fn) {
    const tag = new StackPanel()
    tag.widthInPixels = 150
    const id = ++this.tagId
    const btn = Button.CreateSimpleButton(`tag_${id}`, '测试的Tag')
    btn.background = 'white'
    btn.alpha = 0.7
    btn.zIndex = 1
    btn.fontSize = 16
    btn.cornerRadius = 5
    // btn.linkOffsetY = 100

    btn.adaptHeightToChildren = true
    btn.adaptWidthToChildren = true
    btn.textBlock.paddingBottomInPixels = 5
    btn.textBlock.paddingTopInPixels = 5
    btn.textBlock.paddingLeftInPixels = 5
    btn.textBlock.paddingRightInPixels = 5

    btn.textBlock.resizeToFit = true
    btn.color = 'black'
    btn.hoverCursor = 'pointer'
    btn.onPointerUpObservable.add(() => {
      fn && fn()
    })

    tag.addControl(btn)

    return tag
  }

  addTag(mesh: AbstractMesh, listener) {
    const panel = this.createTag(listener)
    this.texture.addControl(panel)
    // panel.background = 'white'
    panel.linkWithMesh(mesh)
    panel.linkOffsetY = -200
    // panel.zIndex = 1

    const line = new Line('link')
    line.lineWidth = 5
    line.alpha = 0.5
    line.dash = [5, 10]
    line.color = 'white'
    this.texture.addControl(line)
    line.linkWithMesh(mesh)
    line.connectedControl = panel
  }
}

export default TagUI
